<template>
  <div class="app-container">
    <!-- 头部信息 -->
    <div class="group-header">
      <el-image
        :src="detail.coverImage || require('@/assets/images/login-background.jpg')"
        class="group-cover"
        fit="cover">
      </el-image>
      <div class="group-info">
        <h2>{{ detail.name }}</h2>
        <p class="description">{{ detail.description || '暂无描述' }}</p>
        <div class="meta">
          <span><i class="el-icon-user"></i> 负责人：{{ detail.mainOwnerName }}</span>
          <span><i class="el-icon-user-solid"></i> 成员：{{ detail.memberCount }}人</span>
        </div>
      </div>
    </div>

    <!-- 选项卡 -->
    <el-tabs v-model="activeTab">
      <el-tab-pane label="考试/测评/作业" name="activities">
        <activity-tab :groupId="groupId" />
      </el-tab-pane>
      <el-tab-pane label="成绩管理" name="scores">
        <score-tab :groupId="groupId" />
      </el-tab-pane>
      <el-tab-pane label="申诉记录" name="appeals">
        <appeal-record :groupId="groupId" />
      </el-tab-pane>
      <el-tab-pane label="通讯录" name="members">
        <member-tab :groupId="groupId" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import ActivityTab from '../components/ActivityTab'
import ScoreTab from '../components/ScoreTab'
import MemberTab from '../components/MemberTab'
import AppealRecord from '../components/AppealRecord'
import { getGroupDetail } from '@/api/exam/sudentGroupDetail'

export default {
  name: 'StudentExamGroupDetail',
  components: { ActivityTab, ScoreTab, MemberTab, AppealRecord },
  data() {
    return {
      groupId: null,
      activeTab: 'activities',
      detail: {
        name: '',
        coverImage: '',
        description: '',
        mainOwnerName: '',
        memberCount: 0
      }
    }
  },
  created() {
    this.groupId = this.$route.params.groupId
    this.loadDetail()
  },
  methods: {
    loadDetail() {
      // 模拟数据 - 实际项目中替换为API调用
      this.detail = {
        name: '计算机科学考试组',
        coverImage: '',
        description: '计算机科学与技术专业考试组',
        mainOwnerName: '张老师',
        memberCount: 45
      }

      // 实际API调用
      // getGroupDetail(this.groupId).then(response => {
      //   this.detail = response.data
      // })
    }
  }
}
</script>

<style scoped>
.group-header {
  display: flex;
  margin-bottom: 20px;
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.group-cover {
  width: 200px;
  height: 120px;
  border-radius: 4px;
  margin-right: 20px;
}

.group-info {
  flex: 1;
}

.group-info h2 {
  margin: 0 0 10px;
  font-size: 22px;
}

.description {
  color: #666;
  margin: 0 0 15px;
}

.meta {
  color: #999;
  font-size: 14px;
}

.meta span {
  margin-right: 15px;
}

.meta i {
  margin-right: 5px;
}
</style>
